<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title, links, scripts,styles)">
    <meta charset="utf-8}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge}"/>
    <title th:replace="${title}">Title</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport}"/>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/font-awesome-4.7.0/css/font-awesome.min.css}"/>
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/plugins/ionicons-2.0.1/css/ionicons.min.css}"/>
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/AdminLTE.min.css}"/>
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/skins/_all-skins.min.css}"/>
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/plugins/iCheck/flat/blue.css}"/>
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.css}"/>
    <!-- Date Picker -->
    <link rel="stylesheet" th:href="@{/plugins/datepicker/datepicker3.css}"/>
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.css}"/>
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}"/>
    <th:block th:replace="${links}"></th:block>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script th:src="@{/plugins/html5shiv/html5shiv.js}"></script>
    <script th:src="@{/plugins/respond/respond.min.js}"></script>
    <![endif]-->
    <!-- jQuery 2.2.3 -->
    <script th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
    <th:block th:replace="${styles}"></th:block>
    <th:block th:replace="${scripts}"/>
</head>
<body class="skin-blue sidebar-mini" th:fragment="body(section)">
<div class="wrapper">
    <header class="main-header">
        <!- - Logo - ->
        <a class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>商</b>户</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>管理</b>平台</span>
        </a>
        <nav class="navbar navbar-static-top" role="navigation">
            <!--控制菜单显示方式-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!--导航右则内容-->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li></li>
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>-->
                            <span  class="hidden-xs" th:text="${session.ADMIN_SESSION.name}" ></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="user-body">
                                <div class="text-center">
                                    <a href="#" data-target="#myModalOrg"  data-toggle="modal" onclick="onLoadOrg()">切换机构</a>
                                </div>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">修改密码</a>
                                </div>
                                <div class="pull-right">
                                    <a  th:href="@{/logout}" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

        </nav>
    </header>
    <!--模态框-->
    <div class="modal fade" id="myModalOrg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <input type="hidden" id="ModalRoleId">
                    <input type="hidden" id="ModalSetUrl">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>

                    <h4 class="modal-title" id="myModalLabelOrg">
                        请选择你要切换的机构
                    </h4>
                </div>
                <form action="/MpsOrg/changeOrg">
                <div class="modal-body">
                    <div id="modeldata" class="col-md-offset-4"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <input type="submit" class="btn btn-primary"  value="提交更改"  >
                </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--加载机构数据-->
    <script type="application/javascript">
        function onLoadOrg() {
            $.ajax({
                type: 'Get',
                url: "/MpsOrg/getOrgByUid",
                error: function () {
                    //请求失败处理函数
                    alert('亲，请求失败！');
                },
                success: function (data) {
                    var check="<div class='form-group'>";
                    check +=""
                    $.each(data, function(i,item){
                        check +="<div class='radio'><label><input type='radio' name='orgId' id='orgId' value="+item.id+">"+item.name+"</label></div>"
                    });
                    check +="</div>";
                    $("#modeldata").html(check);
                }
            });
            $.fn.zTree.destroy();
            var t = $("#treeFun");
            t = $.fn.zTree.init(t, setting, treeNodes);

        }
    </script>
    <!--菜单内容-->
    <aside class="main-sidebar">
        <section class="sidebar">
            <!--/*@thymesVar id="menus" type="java.util.List"*/-->
            <ul class="sidebar-menu" id="sidebar-menu">
                <li class="header">控制面板</li>
                <li th:each="item:${session.ADMIN_MENUS}" th:class="${item.active}?'treeview active':'treeview'">
                    <a th:href="${item.href}">
                        <span th:text="${item.name}"/>
                    </a>
                    <ul class="treeview-menu">
                        <li th:each="chi:${item.children}" th:class="${chi.active}?'active':''">
                            <a th:href="${chi.href}">
                                <span th:text="${chi.name}"></span>
                            </a>
                        </li>
                    </ul>
                </li>
                <!--
                <script type="text/javascript">
                    $(document).ready(function(){
                        //加载菜单
                        $.ajax({
                            url:"/AjaxMenus",
                            type:"POST",
                            dataType:"JSON",
                            success:function(data){
                                handleParent(data);
                            }
                        });
                    });
                    /**
                     * 加载一级菜单信息
                     */
                    function handleParent(l){
                        $.each(l,function(i,n){
                            var li=$("<li/>");
                            li.addClass("treeview");
                            if(n.active){
                                li.addClass("active");
                            }
                            var a=$("<a/>");
                            a.attr("href",n.href);
                            a.attr("target",n.target);

                            var span=$("<span/>");
                            span.text(n.text);
                            a.append(span);
                            li.append(a);
                            li.append(handleChildren(n.children));
                            $("#sidebar-menu").append(li);
                        });
                    }
                    /**
                     * 加载二级菜单信息
                     * @param l
                     */
                    function handleChildren(l){
                        var ul=$("<ul/>");
                        ul.addClass("treeview-menu");
                        $.each(l,function(i,n){
                            var li=$("<li/>");
                            if(n.active){
                                li.addClass("active");
                            }
                            var a=$("<a/>");
                            a.attr("href",n.href);
                            a.attr("target",n.target);
                            var span=$("<span/>");
                            span.text(n.text);
                            a.append(span);
                            li.append(a);
                            li.append(handleChildren(n.children));
                            ul.append(li);
                        });
                        return ul;
                    }
                </script>-->
            </ul>
        </section>
    </aside>
    <!--主体内容-->
    <div class="content-wrapper" th:replace="${section}">
        <section class="content-header">
            <h1>
                Dashboard
                <small>Control panel</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Dashboard</li>
            </ol>
        </section>
        <section class="content">
            aaa
        </section>
    </div>
</div>


<!-- jQuery UI 1.11.4 -->
<script th:src="@{/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<!-- Morris.js charts -->

<script th:src="@{/plugins/raphael/raphael.min.js}"></script>

<!-- Sparkline -->
<script th:src="@{/plugins/sparkline/jquery.sparkline.min.js}"></script>
<!-- jvectormap -->
<script th:src="@{/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
<script th:src="@{/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
<!-- jQuery Knob Chart -->
<script th:src="@{/plugins/knob/jquery.knob.js}"></script>
<!-- daterangepicker -->
<script th:src="@{/plugins/moment/moment-with-locales.js}"></script>
<script th:src="@{/plugins/daterangepicker/daterangepicker.js}"></script>
<!-- datepicker -->
<script th:src="@{/plugins/datepicker/bootstrap-datepicker.js}"></script>
<!-- Bootstrap WYSIHTML5 -->
<script th:src="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>
<!-- Slimscroll -->
<script th:src="@{/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/plugins/fastclick/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/AdminLTE/js/app.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/AdminLTE/js/demo.js}"></script>
</body>
</html>